<template>
  <div class="upload-container">
      <el-select v-model="regionForm.regionContinentID" placeholder="请选择">
        <el-option
        v-for="item in continentOptions"
        :key="item.ID"
        :label="item.regionName"
        :value="item.ID">
        </el-option>
    </el-select>
      <el-select v-if="countryOptions.length > 0" v-model="regionForm.regionCountryID" placeholder="请选择">
        <el-option
        v-for="item in countryOptions"
        :key="item.ID"
        :label="item.regionName"
        :value="item.ID">
        </el-option>
    </el-select>
      <el-select v-if="provinceOptions.length > 0" v-model="regionForm.regionProvinceID" placeholder="请选择">
        <el-option
        v-for="item in provinceOptions"
        :key="item.ID"
        :label="item.regionName"
        :value="item.ID">
        </el-option>
    </el-select>
      <el-select v-if="cityOptions.length > 0" v-model="regionForm.regionCityID" placeholder="请选择">
        <el-option
        v-for="item in cityOptions"
        :key="item.ID"
        :label="item.regionName"
        :value="item.ID">
        </el-option>
    </el-select>
      <el-select v-if="countyOptions.length > 0" v-model="regionForm.regionCountyID" placeholder="请选择">
        <el-option
        v-for="item in countyOptions"
        :key="item.ID"
        :label="item.regionName"
        :value="item.ID">
        </el-option>
    </el-select>
      <el-select v-if="townOptions.length > 0" v-model="regionForm.regionTownID" placeholder="请选择">
        <el-option
        v-for="item in townOptions"
        :key="item.ID"
        :label="item.regionName"
        :value="item.ID">
        </el-option>
    </el-select>
  </div>
</template>

<script>
import { getRegionUsableList } from '@/api/geography/region'
import { string } from 'clipboard'

export default {
  name: 'RegionSimple',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      regionForm:{
        regioContinentID:0,
        regionCountryID:0,      //国
        regionProvinceID:0,     //省
        regionCityID:0,         //市
        regionCountyID:0,       //县/区
        regionTownID:0          //镇
      },
      selectedData:[],          //最近一次选择的区域信息
      continentOptions:[],
      countryOptions:[],
      provinceOptions:[],
      cityOptions:[],
      countyOptions:[],
      townOptions:[]
    }
  },
  computed: {
    imageUrl() {
      return this.value
    }
  },
  created() {
    let selectedRegion = window.localStorage.getItem('bamboo-region-selected')
    if(selectedRegion != null){
      selectedRegion = JSON.parse(selectedRegion)
      this.regionForm = selectedRegion
    }
    this.getRegionList()
  },
  watch: {
    "regionForm.regionContinentID"(newVal,oldVal){
        this.emitInput(newVal)
        this.getRegionList(newVal,"regionContinentID")
    },
    "regionForm.regionCountryID"(newVal,oldVal){
        this.emitInput(newVal)
        this.getRegionList(newVal,"regionCountryID")
    },
    "regionForm.regionProvinceID"(newVal,oldVal){
        this.emitInput(newVal)
        this.getRegionList(newVal,"regionProvinceID")
    },
    "regionForm.regionCityID"(newVal,oldVal){
        this.emitInput(newVal)
        this.getRegionList(newVal,"regionCityID")
    },
    "regionForm.regionCountyID"(newVal,oldVal){
        this.emitInput(newVal)
        this.getRegionList(newVal,"regionCountyID")
    },
    "regionForm.regionTownID"(newVal,oldVal){
        this.emitInput(newVal)
        this.getRegionList(newVal,"regionCountyID")
    }
  },
  methods: {
    getRegionList:function(regionID,blockName = ""){
      let _this = this;
      if(regionID == undefined){
        regionID = 0
      }
      let regionCacheKey = 'bamboo-region-'+String(regionID)
      let regionList = window.localStorage.getItem(regionCacheKey)
      if(typeof(regionList) == "string"){
        regionList = JSON.parse(regionList)
      }
      else if(regionList == null){
        regionList = new Array()
      }
      console.log(regionList.length)
      if(regionList.length > 0){
        _this.refreshRegionSelectedList(regionList,blockName)

      }else{
        getRegionUsableList({
          "regionID":regionID
        }).then((response) => {
            if (response.code === 200) {
              window.localStorage.setItem(regionCacheKey,JSON.stringify(response.data.list))
              _this.refreshRegionSelectedList(response.data.list,blockName)
            } else {
              _this.$message({
                message: response.msg,
                type: 'error'
              })
            }
        })

      }
      
    },
    refreshRegionSelectedList:function(regionList,blockName){
      let _this = this;
      if(typeof(regionList)){

      }
    
      if(blockName == 'regionContinentID'){
        _this.countryOptions = regionList
        _this.provinceOptions = []
        _this.cityOptions = []
        _this.countyOptions = []
        _this.townOptions = []
      }
      else if(blockName == 'regionCountryID'){
        _this.provinceOptions = regionList
        _this.cityOptions = []
        _this.countyOptions = []
        _this.townOptions = []
      }
      else if(blockName == 'regionProvinceID'){
        _this.cityOptions = regionList
        _this.countyOptions = []
        _this.townOptions = []
      }
      else if(blockName == 'regionCityID'){
        _this.countyOptions = regionList
        _this.townOptions = []
      }
      else if(blockName == 'regionCountyID'){
        _this.townOptions = regionList
      }else{              
        _this.continentOptions = regionList
        _this.countryOptions = []
        _this.provinceOptions = []
        _this.cityOptions = []
        _this.countyOptions = []
        _this.townOptions = []
      }

    },
    rmImage() {
      this.emitInput('')
    },
    emitInput(val) {
      console.log(this.regionForm)
      window.localStorage.setItem('bamboo-region-selected',JSON.stringify(this.regionForm))
      this.$emit('input', this.regionForm)
    }
  }
}
</script>